<template>
  <div class="app-container">
    <el-table :data="tableData">
      <el-table-column prop="text" :label="$t('名称')"></el-table-column>
      <el-table-column :label="$t('操作')">
        <template slot-scope="scope">
          <button
            class="table_btn font12 bg_blue text_white"
            @click="viewDetail(scope.row)"
          >{{$t('查看')}}</button>
          <button
            class="table_btn font12 bg_blue text_white"
            @click="handleEdit(scope.row)"
            v-if="permissions.indexOf('/screenadv/defaultSet') != -1"
          >{{$t('修改')}}</button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改 -->
    <el-dialog :title="$t('修改')" :visible.sync="showUpdate" :close-on-click-modal="false">
      <div class="order_detail">
        <div class="txt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('类型')}}：</span>
          </p>
          <span class="font14 text_black">{{updateFrom.name}}</span>
        </div>
        <div class="upload_list u-f">
          <p class="lable u-f">
            <span class="font14 text_black">{{$t('上传图片')}}：</span>
          </p>
          <el-upload
            :action=" protocol + '//cdb.workair.vip/operate/screenadv/fileUpload'"
            :headers="{token,ocode}"
            name="img_file"
            :data="{ 'type': 'image' }"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :on-error="handleError"
            list-type="picture"
          >
            <el-button size="small" type="primary">{{$t('点击上传')}}</el-button>
          </el-upload>
        </div>
        <button class="update_btn font12 bg_blue text_white" @click="updateSubmit">{{$t('提交')}}</button>
      </div>
    </el-dialog>
    <!-- 查看图片 -->
    <el-dialog :title="$t('查看图片')" :visible.sync="showDetail" :close-on-click-modal="false">
      <img class="detail_img" :src="detail_img" />
    </el-dialog>
    <refresh @click="getData"></refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "screenadv-defaultImg",
  data() {
    return {
      tableData: [],
      protocol: window.location.protocol,
      showDetail: false,
      showUpdate: false,
      fileList: [],
      detail_img: "",
      updateFrom: {
        update_type: "",
        image_id: "",
        name: ""
      }
    };
  },
  computed: {
    ...mapState(["token", "ocode", "permissions"])
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      util.$http("/screenadv/defaultImg").then(res => {
        if (res.code == 1) {
          this.tableData = res.data;
        }
      });
    },
    viewDetail(row) {
      this.detail_img = row.img;
      this.showDetail = true;
    },
    handleEdit(row) {
      this.updateFrom.name = row.text;
      this.updateFrom.update_type = row.type;
      this.fileList = [];
      this.showUpdate = true;
    },
    handleSuccess(response) {
      this.updateFrom.image_id = response.msg;
    },
    handleRemove() {
      this.updateFrom.image_id = "";
    },
    handleError(err) {
      this.$message({
        message: this.$t("上传失败"),
        type: "warning"
      });
    },
    handleExceed() {
      this.$message({
        message: this.$t("只能上传一张"),
        type: "warning"
      });
    },
    updateSubmit() {
      util
        .$http("/screenadv/defaultSet", {
          image: this.updateFrom.image_id,
          type: this.updateFrom.update_type
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.updateFrom = {
              update_type: "",
              image_id: "",
              name: ""
            };
            this.fileList = [];
            this.showUpdate = false;
            this.getData();
          }
        });
    }
  }
};
</script>

<style scoped>
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.table_btn {
  cursor: pointer;
  padding: 7px 10px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  margin-right: 25px;
}
.order_detail .txt_list {
  margin-bottom: 20px;
}
.order_detail .txt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .txt_list .tip {
  width: 300px;
  margin: 0 0 0 15px;
}
.order_detail .upload_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .upload_list .tip {
  cursor: pointer;
  width: 300px;
  margin: 0 0 0 15px;
}
.order_detail .update_btn {
  cursor: pointer;
  padding: 10px 20px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  margin-top: 40px;
}
.detail_img {
  max-width: 900px;
  height: auto;
}
</style>
